<script>
import { defineComponent } from 'vue'
import { Refresh, Search, EditPen, DeleteFilled, Setting } from "@element-plus/icons-vue";
import { userList, userlogin, userAdd, userEdit, userdelete, userModifyState, userAllocation } from '@/api/user'
import { h } from 'vue'

export default defineComponent({
  data() {
    return {
      // 搜索框的内容
      input: '',
      // 用来接收用户列表数据
      userListData: [],
      // 页数
      currpager: 1,
      //添加用户抽屉开关
      drawer: false,
      //添加编辑抽屉的开关
      edit: false,
      // 删除弹出框
      deleteZt: false,
      // 角色修改框
      role: false,
      //存储用户名
      usne: '',
      //存储密码
      psd: '',
      //存储邮箱
      eml: '',
      //存储手机号
      nmb: '',
      // 用来存储本地数据
      userinfo: {
        usrs: '',
        eml: '',
        mob: '',
        id: '',
      },
      //储存删除id
      deleteId: '',
      //用来存储角色数据
      userRoleAdd: this.$store.state.role,
      //存储角色信息
      roleList:{
        name:'',
        role: '',
        id: ''
      },
      // 存储角色名字
      roleName: '',
      roleId: ''
    };
  },

  mounted() {
    //登录请求  获取token
    //用户列表请求
    this.getuserList()
  },
  methods: {
    //封装的用户列表
    getuserList() {
      //用户列表请求
      userList(
        {
          query: '',
          pagenum: 1,
          pagesize: 100,
        }).then(res => {
          this.userListData = res.data.data.users
        })
    },

    //封装验证对错
    testAndVerify(res){
      if (res.data.meta.status !== 200) {
          ElMessage.error(res.data.meta.msg)
        } else {
          ElMessage({
            message: res.data.meta.msg,
            type: 'success',
          })
        }
    },
    // 查询按钮 查询昵称
    search() {
      // 输入不能为空校验
      if (this.input === '') {
        return ElMessage({
          message: h('p', null, [
            h('span', null, '搜索内容不能'),
            h('i', { style: 'color: teal' }, '为空'),
          ]),
        })
      }
      // 根据输入框内容查找数据
      this.userListData = this.userListData.filter(item => {
        return item.username.includes(this.input)
      })
    },

    //重置按钮
    reset() {
      //用户列表请求
      this.getuserList()
      this.input = ''
    },

    // 添加用户(抽屉)
    add() {
      // 输入校验   名称校验
      if (/^(?=.*[a-zA-Z])(?=.*\d).+$/.test(this.usne)) return ElMessage.error('请规范输入名称')
        
      // 密码校验
      if (!/^[\w-]{4,16}$/.test(this.psd)) return ElMessage.error('请规范输入密码')
        
      // 邮箱校验
      if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.eml)) return ElMessage.error('请规范输入邮箱')
      
      // 名称校验
      if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.nmb)) return ElMessage.error('请规范输入手机号')
      
      // 添加用户请求
      userAdd({
        username: this.usne,
        password: this.psd,
        email: this.eml,
        mobile: this.nmb,
      }).then(res => {
        if (res.data.meta.status !== 201) {
          ElMessage.error(res.data.meta.msg)
        } else {
          ElMessage({
            message: res.data.meta.msg,
            type: 'success',
          })
        }
          //用户列表请求
          this.getuserList()
      })
      this.drawer = false
    },

    // 关闭抽屉触发
    closeHandle() {
      this.usne = '',
        //存储密码
        this.psd = '',
        //存储邮箱
        this.eml = '',
        //存储手机号
        this.nmb = ''
    },

    //编辑用户信息
    edituser(data) {
      //抽屉开关
      this.edit = true
      // 把数据存储到本地
      this.userinfo = {
        usrs: data.username,
        eml: data.email,
        mob: data.mobile,
        id: data.id
      }
    },

    //点击确认编辑
    modify() {
      if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.userinfo.eml))return ElMessage.error('请规范输入邮箱')
        
      if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.userinfo.mob))return ElMessage.error('请规范输入手机号')
        
      // 编辑用户请求
      userEdit({
        id: this.userinfo.id,
        email: this.userinfo.eml,
        mobile: this.userinfo.mob,
      }).then(res => {
        this.testAndVerify(res)
        this.getuserList()
      })
      this.edit = false
    },

    //删除用户提示框
    deleteuser(xxx) {
      this.deleteId = xxx.id
      this.deleteZt = true
      // 当前函数只负责控制一个删除确认弹框的展示与隐藏， 换句话说就是修改一个变量的布尔值
      // 接下来的函数需要放在弹窗框的确定按钮被点击的时候再触发
    },

    //删除用户
    deleteUserList(){
      userdelete({
        id: this.deleteId
      }).then(res => {
        this.testAndVerify(res)
        this.deleteZt = false
        this.getuserList()
      })
    },

    // 分配角色
    userRole(data) {
      this.role = true
      this.roleList.name = data.username
      this.roleList.role = data.role_name
      this.roleList.id = data.id
    },
    op(name){
      this.roleName = name.roleName
      this.roleId = name.id
    },
    // 发送修改角色的请求
    changeRole(){
      userAllocation({
        id: this.roleList.id,
        rid: this.roleId
      }).then(res => {
        this.testAndVerify(res)
        console.log(res);
      })
      this.role = false
    },
    //修改状态
    roleStatus(yyy){
        userModifyState({
          uId: yyy.id,
          type: yyy.mg_state,
        }).then(res => {
          this.testAndVerify(res)
        })
    }
  },

  computed: {
    // 分页
    adminListCom() {
      return this.userListData.slice((this.currpager - 1) * 10, (this.currpager - 1) * 10 + 10)
    }
  },

  components: {
    Refresh,
    Search,
    EditPen,
    DeleteFilled,
    Setting,
  }
})
</script>

<template>
  <!-- top -->
  <div>
    <!-- 搜索框 -->
    <el-input v-model="input" class="w-50 m-2" placeholder="请输入用户昵称" />

    <!-- 搜索 -->
    <el-button type="primary" @click="search">
      <el-icon>
        <Search />
      </el-icon>
      查询
    </el-button>

    <!-- 重置 -->
    <el-button @click="reset">
      <el-icon>
        <Refresh />
      </el-icon>
      重置
    </el-button>
  </div>

  <!-- content -->
  <div class="content">
    <span>用户列表</span>
    <el-button type="primary" @click="this.drawer = true">
      添加用户
    </el-button>
  </div>
  <!-- 抽屉 -->
  <el-drawer @close="closeHandle" v-model="drawer" title="添加用户" :with-header="false">
    <h1>添加用户</h1>
    <el-form-item label="用户名:">
      <el-input v-model="usne" />
    </el-form-item>

    <el-form-item label="密&nbsp;&nbsp;&nbsp;码:">
      <el-input v-model="psd" />
    </el-form-item>

    <el-form-item label="邮&nbsp;&nbsp;&nbsp;箱:">
      <el-input v-model="eml" />
    </el-form-item>

    <el-form-item label="手机号:">
      <el-input v-model="nmb" />
    </el-form-item>
    <el-button class="add" type="primary" @click="add" >添加用户</el-button>
  </el-drawer>
  <!-- 用户编辑弹出框 -->
  <el-dialog v-model="edit" title="编辑用户信息" width="30%" :before-close="handleClose">
    <div class="yangshi" style="margin: 10px 10px;">
      <span>用户名：</span>
      <el-input v-model="userinfo.usrs" disabled style="width: 300px;"></el-input>
    </div>

    <div class="yangshi" style="margin: 10px 10px;">
      <span>邮&nbsp;&nbsp;&nbsp;箱：</span>
      <el-input v-model="userinfo.eml" style="width: 300px;"></el-input>
    </div>

    <div class="yangshi" style="margin: 10px 10px;">
      <span>手机号：</span>
      <el-input v-model="userinfo.mob" style="width: 300px;"></el-input>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="edit = false">取消</el-button>
        <el-button type="primary" @click="modify">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 删除弹出框 -->
    <el-dialog v-model="deleteZt" title="删除用户信息" width="25%" :before-close="handleClose">
      <span>确定要删除此数据吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteZt = false">取消</el-button>
        <el-button type="primary" @click="deleteUserList">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分配角色信息 -->
  <el-dialog v-model="role" title="分配角色信息" width="30%" :before-close="handleClose">
      
    <div class="yangshi" style="margin: 10px 10px;">
      <span style="margin-right: 10px;">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</span>
      <el-input disabled v-model="roleList.name" style="width: 220px;"></el-input>
    </div>

    <div class="yangshi" style="margin: 10px 10px;">
      <span>当&nbsp;前&nbsp;角&nbsp;色：</span>
      <el-input disabled v-model="roleList.role" style="width: 220px;"></el-input>
    </div>

    <div class="yangshi" style="margin: 10px 10px;">
      <span>分配新角色：</span>
      <el-select  :placeholder="roleName">
        <el-option
        v-for="item in userRoleAdd"
        :key="item.id"
        :label="item.roleName"
        :value="item.roleName"
        @click="op(item)"
      />
      </el-select>
    </div>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="role = false">取消</el-button>
        <el-button type="primary" @click="changeRole">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- bottom -->
  <div class="bottom">
    <el-table :data="adminListCom" border style="width: 100%" type="index">
      <el-table-column type="index" prop="date" label="序号" width="60" />
      <el-table-column prop="username" label="姓名" width="100" />
      <el-table-column prop="mobile" label="手机号" width="120" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="create_time" label="创建时间" width="140" />
      <el-table-column prop="role_name" label="角色" width="140" />
      <!-- 状态 -->
      <el-table-column prop='mg_state' label="状态" width="100">
        <template v-slot:default="zt">
          <el-switch v-model="zt.row.mg_state" @click="roleStatus(zt.row)" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
        </template>
      </el-table-column>
      <!-- 编辑 -->
      <el-table-column prop="name" label="编辑" width="140px">
        <template v-slot:default="data">
          <el-button @click="edituser(data.row)" type="primary">
            <el-icon>
              <EditPen />
            </el-icon>
            编辑</el-button>
        </template>
      </el-table-column>
      <!-- 删除 -->
      <el-table-column prop="name" label="删除">
        <template v-slot:default="xxx">
          <el-button @click="deleteuser(xxx.row)" type="danger">
            <el-icon>
              <DeleteFilled />
            </el-icon>
            删除</el-button>
        </template>
      </el-table-column>
      <!-- 分配角色 -->
      <el-table-column prop="name" label="分配角色">
        <template v-slot:default="eee">
        <el-button @click="userRole(eee.row)" type="success">
          <el-icon>
            <Setting />
          </el-icon>
          分配角色</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <el-pagination background layout="prev, pager, next" :total="this.userListData.length"
    v-model:current-page="currpager" />
</template>

<style lang="scss" scoped>
.w-50 {
  width: 260px;
}
.el-button {
  margin-left: 20px;
}
.content {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom {
  text-align: center;
}
.bottom .bj {
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  span {
    display: flex;
    align-items: center;
  }
  .el-input {
    width: 100px;
  }
}
</style>